<template>
	<div id="applylist" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item>水卡开卡记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button>	 -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">申请时间:</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="时间开始"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="时间结束"></el-date-picker>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">水卡号:</span>
							<el-input size="medium" v-model="card" placeholder="请输入水卡号" style="width: 160px;"></el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">手机号码:</span>
							<el-input size="medium" v-model="tel" type="Number" placeholder="请输入手机号码" style="width: 160px;">
							</el-input>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left  new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">卡片类型:</span>
							<el-select size="medium" v-model="c_type" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in selectedlei" :key="item.id" :label="item.label" :value="item.id"></el-option>
							</el-select>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">审核状态:</span>
							<el-select size="medium" v-model="audit_status" placeholder="请选择" style="width:140px">
								<el-option v-for="item in selected" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>

						<div class="same-left-one">
							<span class="same-search-span">所属园区:</span>
							<el-select size="medium" v-model="province_id" placeholder="请选择省份" @change="chooseProvince"
								style="width:140px">
								<el-option v-for="item in Province" :key="item.province" :label="item.province_name"
									:value="item.province">
								</el-option>
							</el-select>
							<el-select size="medium" v-model="city_id" placeholder="请选择城市" @change="chooseCity" style="width:140px">
								<el-option v-for="item in City" :key="item.city" :label="item.city_name" :value="item.city">
								</el-option>
							</el-select>
							<el-select size="medium" v-model="area_id" placeholder="请选择区县" @change="chooseArea" style="width:140px">
								<el-option v-for="item in Area" :key="item.area" :label="item.area_name" :value="item.area">
								</el-option>
							</el-select>
							<el-select size="medium" v-model="village_name" filterable placeholder="请选择园区" @change="searchVillage"
								style="width:140px">
								<el-option v-for="item in Village" :key="item.id" :label="item.village_name" :value="item.village_name">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>

		<div class="same-table-box">
			<!--<h4 class="same-title-box">-->
			<!--水卡申请记录-->
			<!--</h4>-->
			<div class="table_box">




				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>


						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="common-table-expand">
									<el-form-item label="证件号那">
										<span>{{props.row.IDcard||'——'}}</span>
									</el-form-item>
									<el-form-item label="申请时间">
										<span> {{props.row.expiry_time||'——'}}</span>
									</el-form-item>

									<el-form-item label="到期时间">
										<span> {{props.row.apply_time||'——'}}</span>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>
						<el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*row}}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="full_name" label="姓名">
						</el-table-column>


						<el-table-column align="center" prop="tel" label="手机号码">
						</el-table-column>


						<el-table-column align="center" prop="id" label="卡号">
							<template slot-scope="scope">
								<!-- filtersCard -->
								{{scope.row.card_number}}
							</template>
						</el-table-column>


						<el-table-column align="center" prop="id" label="证件类型">
							<template slot-scope="scope">
								{{scope.row.paper_type || '——'}}
							</template>
						</el-table-column>


						<el-table-column align="center" prop="card_type" label="水卡类型">
						</el-table-column>





						<el-table-column align="center" show-overflow-tooltip  prop="village_name" label="园区名称">
						</el-table-column>



						<el-table-column align="center" prop="audit_status" label="审核状态">
						</el-table-column>



						<el-table-column width="240" align="center" prop="id" label="操作">
							<template slot-scope="scope">
								<el-link class="custom-link" @click="lookup(scope.row.id)">查看</el-link>
								<el-link class="custom-link" @click="edit(scope.row.id)">修改</el-link>
								<el-link class="custom-link" v-if="scope.row.audit_status == '审核拒绝'" @click="againAudit(scope.row.id)">再申请</el-link>
								<el-link class="custom-link" v-if="scope.row.audit_status == '审核通过' && scope.row.card_number == '' "
									@click="makecard(scope.row.id)">制卡</el-link>
								<el-link class="custom-link" v-if="scope.row.audit_status == '审核通过' && scope.row.card_number != '' "
									@click="limited(scope.row.card_number)">年审</el-link>
							</template>
						</el-table-column>

						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="pageNo" :page-sizes="sizes" :page-size="row"
							layout="total,prev, pager, next, jumper, sizes" :total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
		name: 'applylist',
		data: function () {
			return {

				time: '',
				Province: [],
				City: [],
				Area: [],
				Village: [],
				province_id: '',
				city_id: '',
				area_id: '',
				village_id: '',
				village_name: '',
				tableData: [],
				address: [],
				selected: [{
					value: '1',
					label: '审核中'
				}, {
					value: '2',
					label: '审核通过'
				}, {
					value: '3',
					label: '审核拒绝'
				}],
				audit_status: '',
				card: '', 		//实体卡
				c_type: '', //卡片类型value
				selectedlei: [{
					id: '',
					label: '全部'
				}, {
					id: '1',
					label: '老年卡'
				}, {
					id: '2',
					label: '婴儿卡'
				}],
				class: '2',
				row: 15,
				sizes: [15, 30, 40],
				total: 0,
				pageNo: 1,
				start_time: '',
				end_time: '',
				tel: '',
				loading: true, //加载动画
				isLoad: false, //是否请求接口

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			}
		},
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			this.getCardType();
			this.getProvince();
			this.cardList();
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			// 获取水卡种类
			getCardType() {
				this.$post({
					url: 'Partner/WaterCard/getCarType',
					data: {
						type: 2,//1全部，2特殊水卡
						is_apply: 1,//是否申请，1是，2否
						is_search: 1,//是否搜索，1是，2否
					},
					success: (data) => {
						var list = data.data;
						list.unshift({ id: '', label: '全部' });
						this.selectedlei = list;

					}
				})
			},
			//三级联动-省
			getProvince() {
				this.$post({
					url: 'Partner/Village/getEqProvince',
					data: {
					},
					success: (data) => {
						this.Province = data.data;
					}
				})
			},//三级联动-市
			getCity(id) {
				this.$post({
					url: 'Partner/Village/getEqCity',
					data: {
						id: id
					},
					success: (data) => {
						this.City = data.data;
					}
				})
			},//三级联动-区/县
			getArea(id) {
				this.$post({
					url: 'Partner/Village/getEqArea',
					data: {
						id: id
					},
					success: (data) => {
						this.Area = data.data;
					}
				})
			},//园区列表
			getVillage(id) {

				this.$post({
					url: 'Partner/Village/getAllVillage',
					data: {
						province: this.province_id,
						city: this.city_id,
						area: this.area_id,
						village_name: ''
					},
					success: (data) => {
						this.Village = data.data;
					}
				})
			},//园区搜索
			searchVillage() {

			},
			chooseProvince(val) {
				this.getCity(val);
				this.city_id = '';
				this.area_id = '';
				this.village_name = '';
				this.village_id = '';
			},
			chooseCity(val) {
				this.getArea(val);
				this.area_id = '';
				this.village_name = '';
				this.village_id = '';
			},
			chooseArea(val) {
				this.getVillage(val)
				this.village_name = '';
				this.village_id = '';
			},
			//制卡
			makecard(id) {
				this.$router.push({
					path: '/makecard', query: { id: id }
				})
			},
			//年审
			limited(card_number) {
				this.$router.push({
					path: '/cardlimited', query: { card_number: card_number }
				})
			},
			//查看
			lookup(id) {
				this.$router.push({
					path: '/checkcard', query: { id: id }
				})
			},//每页条数
			//查看
			edit(id) {
				this.$router.push({
					path: '/specialapplication', query: { id: id }
				})
			},
			againAudit(id) {
				var that = this;
				that.$post({
					url: 'Partner/WaterCard/editSpecialApplication',
					data: {
						id: id,
						again: true
					},
					success: (data) => {
						if (data.code == 1000) {
							this.$message({
								type: 'success',
								showClose: true,
								message: data.message,
								center: true
							});
							this.$router.push({ path: '/applylist' })
						} else {
							this.$message({
								type: 'error',
								showClose: true,
								message: data.message,
								center: true
							});
						}
						//console.log('结果',data);
					}
				})
			},
			handleSizeChange(val) {
				this.pageNo = 1;
				this.row = val;
				this.cardList();
			},//跳转页数
			handleCurrentChange(val) {
				this.pageNo = val;
				this.cardList();
			},
			reset() {
				this.time = "";
				this.card = "";
				this.c_type = '4';
				this.class = '2';
				this.tel = "";
				this.province_id = "";
				this.city_id = "";
				this.area_id = "";
				this.village_name = "";
				this.audit_status = "";
				this.pageNo = 1;
				this.start_time = "";
				this.end_time = "";
				this.cardList();
			},
			//搜索查询
			search() {
				this.pageNo = 1;
				this.tableData = []; // 清空数据
				this.cardList();
			},//申请列表
			cardList() {
				this.loading = true; //关闭动画
				this.isLoad = false; //关闭动画
				this.$post({
					url: 'Partner/WaterCard/waterCardAuditList',
					data: {
						card: this.card,
						card_type: this.c_type,
						page: this.pageNo,
						row: this.row,
						card_class: this.class,
						start_time: this.start_time ? this.start_time : '',
						end_time: this.end_time ? this.end_time : '',
						tel: this.tel,
						province: this.province_id,
						city: this.city_id,
						area: this.area_id,
						village_name: this.village_name,
						audit_status: this.audit_status,
						is_special: 1,//是否特殊水卡，1是，2否
					},
					success: (data) => {
						this.loading = false; //关闭动画
						this.isLoad = true; //关闭动画
						if (data.code == 1000) {
							this.loading = false; //关闭动画
							this.tableData = []; // 清空数据
							this.tableData = data.data.data;
							this.total = Number(data.data.page.total_number);
							this.pageNo = data.data.page.current_page;


							//		    				this.province_id = '';
							//							this.city_id = '';
							//							this.area_id = '';
							//							this.village_id = '';
							//							this.village_name = '';
							//							this.audit_status = '';
							//							this.card = '';				
							//							this.c_type = '4';
							//							this.time = '';

						}

					}
				})
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},

		activated() {
			if (this.$route.meta.isUpdate) {
				this.tableData = [];
				this.cardList()
				this.$route.meta.isUpdate = false;
			}
		},

    beforeRouteEnter (to, from, next) {
      let updates = ["/specialapplication","/cardlimited"]
			if (updates.includes(from.path)) {
				to.meta.isUpdate = true;
			}
      next();
    },
		beforeRouteLeave(to, from, next) {
			let updates = ["/specialapplication", "/cardlimited"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false; 
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}
		
	}
</script>

<style>
	#applylist {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>